<template>
  <h3 style="margin-bottom: 20px">活动终止</h3>
  <h4 style="color: red">点击行以终止活动</h4>
  <el-table :data="marketingRef"
            border
            style="width: 50vw;margin-top: 20px"
            @row-click="deleteMarketing"
  >
    <el-table-column type="index" width="50"/>
    <el-table-column prop="cuisineId" label="菜品ID"/>
<!--    <el-table-column prop="requireGrade" label="要求等级"/>-->
<!--    <el-table-column prop="depleteIntegration" label="消耗积分"/>-->
    <el-table-column prop="discount" label="折扣"/>
  </el-table>
</template>

<script setup>
import {onMounted, ref} from "vue";
import {deleteMarketingApi, listMarketingApi} from "../../api";
import say from "../../util/say";

let marketingRef = ref(null)
onMounted(async () => {
  let marketing = await (await listMarketingApi()).json()
  marketingRef.value = marketing.data
})

function deleteMarketing(marketing) {
  let id = marketing.id
  deleteMarketingApi(id).then(async response => {
    if (response.ok) {
      say.saySuccess('删除成功')
      let marketing = await (await listMarketingApi()).json()
      marketingRef.value = marketing.data
    } else {
      say.sayError('删除失败')
    }
  }).catch(_ => say.sayError('删除失败'))
}
</script>

<style scoped>

</style>